<!-- 对 button 组件的编辑 -->
<template>
  <div class="ai-edit" v-if="dialogShow">
    <el-drawer title="AI小助手" :visible.sync="dialogShow" ref="settingPageDialog" :size="800" :before-close="close" :append-to-body="true" class="dialogDrawT">
      <div class="edit-ai-u" v-loading="loading">
        <el-tabs v-model="activeName">
          <el-tab-pane label="聊天" name="1">
            <AIChat :dialogue="dialogue" :usedNumGet="usedNumGet"/>
          </el-tab-pane>
          <el-tab-pane label="写作" name="2">
            <AIWrite :writing="writing" :usedNumGet="usedNumGet"/>
          </el-tab-pane>
        </el-tabs>
        <div class="total">体验额度：{{usedNum}} / {{total}}</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import AIChat from '@/components/aiassistant/AIChat.vue'
import AIWrite from '@/components/aiassistant/AIWrite.vue'
export default {
  computed: {
  },
  created () {
  },
  mounted () {
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      loading: true,
      usedNum: 0,
      total: 0,
      // 对话
      dialogue: {},
      // 写作
      writing: {}
    }
  },
  methods: {
    show () {
      // AI创作可使用次数
      this.$post('/ai/ai-text-day-time').then(response => {
        if (response) {
          this.total = response
        }
      })
      this.usedNumGet()
      this.GetAITextHistory()
      this.dialogShow = true
    },
    usedNumGet () {
      // AI创作已使用次数
      this.$post('/ai/used-ai-text-day-time').then(response => {
        if (response) {
          this.usedNum = response
        }
      })
    },
    GetAITextHistory () {
      // AI创作使用历史
      this.$post('/ai/ai-text-history').then(response => {
        this.loading = false
        if (response) {
          if (response.dialogue) {
            this.dialogue = response.dialogue
          }
          if (response.writing) {
            this.writing = response.writing
          }
        }
      })
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.usedNum = 0
      this.total = 0
    },
    saveclose () {
    }
  },
  components: {
    AIChat,
    AIWrite
  }
}

</script>
<style lang="scss">
.dialogDrawT{
  .el-drawer__header {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
  }
  .el-drawer__body{
    padding:0 20px 10px;
  }
}
</style>
<style scoped lang="scss">
.edit-ai-u{
  position: relative;
  .total{
    position: absolute;
    right: 0;
    top: 12px;
  }
}
</style>
